<template>
  <div class='chartNav'>
    <div class='leftContent' ref='circle'>
    </div>
  </div>
  </template>
<script>
import * as echarts from 'echarts/core'
import { TooltipComponent, TitleComponent, GridComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
// import { LabelLayout } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { onMounted, ref, watch, computed, nextTick } from 'vue'

echarts.use([
  TooltipComponent,
  PieChart,
  CanvasRenderer,
  // LabelLayout,
  TitleComponent,
  GridComponent,
  LegendComponent
])
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {
        }
      }
    },
    chartData: {
      type: Array,
      default: () => {
        return [
          {
            xcoordinate: '10~15吨',
            ycoordinate: 7251
          }, {
            xcoordinate: '30吨+',
            ycoordinate: 23490
          }, {
            xcoordinate: '5~10吨',
            ycoordinate: 18277
          }, {
            xcoordinate: '0~5吨',
            ycoordinate: 18115
          }, {
            xcoordinate: '15~20吨',
            ycoordinate: 7251
          }, {
            xcoordinate: '25~30吨',
            ycoordinate: 7251
          }, {
            xcoordinate: '20~25吨',
            ycoordinate: 7251
          }
        ]
      }
    }
  },
  setup(props, context) {
    const rem = ref(80)
    const circle = ref()
    const myChart = ref(null)
    onMounted(() => {
      window.addEventListener('resize', setReSize)
      const docEl = document.documentElement
      rem.value = docEl.clientWidth / 24
      chartInit()
    })
    watch(
      () => props.item,
      (count, prevCount) => {
        chartUpdate()
      },
      { deep: true }

    )
    const options = computed(() => {
      const titles = props.chartData.map(item => item.xcoordinate)
      const dataV = props.chartData.map(item => item.ycoordinate)
      const defDate = []
      for (let i = 0; i < dataV.length; i++) {
        defDate.push(100)
      }
      return {
        xAxis: {
          show: true,
          nameTextStyle: {
            color: 'red'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              color: '#3D4146',
              width: 4
            }
          }
        },
        grid: {
          top: 30,
          left: 180,
          right: 30,
          bottom: '10%'
        },
        legend: {
          show: false
        },
        yAxis: [{
          show: true,
          data: titles,
          inverse: true,
          axisLine: { show: false },
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            fontSize: 40,
            color: '#A3A5A6',
            margin: 20
          }
        }, {
          show: true,
          data: [],
          axisLine: { show: false },
          splitLine: { show: false },
          axisTick: { show: false }
        }],
        series: [{
          name: '实际完成率',
          type: 'bar',
          yAxisIndex: 0,
          barCategoryGap: 48, /* 多个并排柱子设置柱子之间的间距 */
          data: dataV,
          barWidth: 40,
          barGap: 48,
          z: 10,
          showBackground: true,
          backgroundStyle: {
            color: '#000000',
            opacity: 0.48
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              fontSize: 40,
              fontWeight: 'bold',
              color: '#E6F7FF',
              formatter: function (data) {
                return '{a|' + data.value + '}' + '{b|' + '辆}'
              },
              rich: {
                a: {
                  fontSize: 40,
                  fontWeight: 600,
                  color: '#E6F7FF'
                },
                b: {
                  color: 'E6F7FF',
                  fontFamily: 'DIN-Light',
                  fontSize: 40,
                  opacity: 0.5,
                  padding: [0, 0, 0, 10]
                }
              }
            }
          },
          color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
            {
              offset: 1,
              color: 'rgba(21, 65, 140, 1)' // 0% 处的颜色
            },
            {
              offset: 0,
              color: 'rgba(42, 140, 240, 1)' // 100% 处的颜色
            }
          ])
        }]
      }
    })
    const chartInit = () => {
      var chartDom = circle.value
      chartDom.removeAttribute('_echarts_instance_')
      myChart.value = echarts.init(chartDom)
      options.value && myChart.value.setOption(options.value)
    }
    const chartUpdate = () => {
      myChart.value.setOption(options.value)
    }
    const setReSize = () => {
      nextTick(() => {
        chartInit()
      })
    }
    return {
      circle,
      chartInit,
      options,
      myChart,
      chartUpdate,
      rem,
      setReSize
    }
  }
}
</script>
  <style lang="less" scoped>
    .chartNav{
      margin-top: 126px;
      width:  1400px;
      height: 620px;
      display: flex;
      justify-content: flex-start;
      // background: red;
      position: relative;
    }
      .leftContent{
        position: absolute;
        z-index: 5;
        float: left;
        // display: inline-block;
        background: transparent;
        width: 100%;
        height: 100%;
        // background: red;
        canvas{
          cursor: pointer !important;
        }
      }
      .leftContent2{
        z-index: 1;
        float: left;
        // display: inline-block;
        width: 100%;
        height: 100%;
        canvas{
          cursor: pointer !important;
        }
      }
  </style>
